Ext.ns('AIR2.Drawer');
/***************
 * AIR2 Drawer BinListSmall Component
 *
 * A dataview to display a small, fixed number of Bins without scrolling.
 *
 * @class AIR2.Drawer.BinListSmall
 * @extends AIR2.UI.DataView
 * @cfg {Object/Array} inlineData
 *   Data radix to load inline, rather than issuing an ajax call.
 * @cfg {Object} inlineParams
 *   Parameters to use with any loaded inlineData, usually {limit:5, self:1}.
 *
 */
AIR2.Drawer.BinListSmall = function(config) {
    if (!config) config = {};

    // setup the load params (can't change for the small list)
    var myParams = config.inlineParams || {limit: 5, self: 1};
    var inlineLoad = (config.inlineData) ? true : false;

    // if inline-loading, don't delay emptyText
    if (inlineLoad) config.deferEmptyText = false;

    // setup the store
    var storeCfg = {
        autoLoad: true,
        autoSave: false,
        autoDestroy: true,
        pruneModifiedRecords: true,
        restful: true,
        url: AIR2.HOMEURL+'/batch.json',
        remoteSort: true,
        baseParams: myParams,
        writer: new Ext.data.JsonWriter({
            encode: true,
            writeAllFields: false
        }),
        listeners: {
            load: function(store, recs, opt) {
                if (!inlineLoad) AIR2.Drawer.STATE.set('params', opt.params);
                else inlineLoad = false;
            }
        }
    };
    if (config.inlineData) storeCfg.data = config.inlineData;
    config.store = new Ext.data.JsonStore(storeCfg);

    // call parent constructor
    AIR2.Drawer.BinListSmall.superclass.constructor.call(this, config);
}
Ext.extend(AIR2.Drawer.BinListSmall, AIR2.UI.DataView, {
    cls: 'air2-binlist air2-binlist-small',
    emptyText: '<div class="air2-empty"><h3>No bins found</h3></div>',
    itemSelector: '.air2-drawer-batch',
    tpl: new Ext.XTemplate(
        '<ul><tpl for=".">' +
          '<li class="air2-drawer-batch">' +
            '<h3 class="name air2-corners3 bin-expand" {[this.quickTip(values)]}>' +
              '{batch_name:ellipsis(32)}</h3>' +
            '<div>' +
              '<span class="count">{[AIR2.Format.batchCount(values)]}</span>' +
              '<span class="last"> | {[AIR2.Format.batchLastUse(values)]}</span>' +
            '</div>' +
          '</li>' +
        '</tpl></ul>',
        {
            compiled: true,
            quickTip: function(values) {
                if (values.batch_name.length > 29)
                    return 'ext:qtip="' + values.batch_name + '"';
                else
                    return '';
            }
        }
    ),
    reloadDataView: function() {
        this.store.reload();
    },
    getBinRecord: function(target) {
        return this.getRecord(target);
    },
    refreshBin: function(target, counts) {
        // create new element
        var str = '', c = counts;
        if (c.insert) str += '<div>+'+c.insert+' added</div>';
        if (c.duplicate) {
            str += '<div>+'+c.duplicate+' duplicate';
            str += (c.duplicate > 1) ? 's</div>' : '</div>';
        }
        if (c.invalid) str += '<div>+'+c.invalid+' INVALID</div>';
        var addcounts = this.el.createChild({cls: 'add-counts', html: str});

        // align
        addcounts.alignTo(target, 'br-br?', [0,-6]);

        // refresh and show add string
        this.refreshNode(this.indexOf(target));
        addcounts.fadeIn({duration:.1}).pause(1).fadeOut({remove:true});
    },
    maskBin: function(target) {
        Ext.fly(target).mask('Adding');
    }
});